<template>
	<div
		class="detial-list-infinite-container"
		v-infinite-scroll="infiniteOnLoadHandle"
		:infinite-scroll-disabled="loadAll"
		:infinite-scroll-distance="10"
	>
		<div
			:class="['checkbox-item']"
			v-for="item of memberDatas"
			:key="item.$_selectKey"
			:title="setTitle(item)"
			@click.stop="onSelectMember(item)"
		>
			<a-radio v-if="model === 'single'"
				class="checkbox-item-checkbox"
				:value="item.$_selectKey"
				:checked="selectedMaps[item.$_selectKey]"
				@change="(e) => onRadioChange(e,item)"
			/>
			<a-checkbox v-if="model === 'mult'"
				class="checkbox-item-checkbox singleAndMult"
				:checked="selectedMaps[item.$_selectKey]"
				@change.stop="(e)=> onCheckedChange(e, item)"
			/>
			<!-- <a-tooltip
				placement="bottom"
				overlayClassName="overlay-tooltip-box"
				class="tooltip-wrap"
				:mouseEnterDelay="0.5"
				:mouseLeaveDelay="0"
			>
				<template slot="title">
					<p class="overlay-tooltip-box-name">
						{{ item.$_showLabel }}
					</p>
					<div class="overlay-tooltip-box-label">
						<span class="label-item">岗位：</span>
						<span class="label-con">{{ onHandlerPartTimeMember(item).postName || '暂无' }}</span>
					</div>
					<div class="overlay-tooltip-box-label">
						<span class="label-item">部门：</span>
						<span class="label-con">{{ onHandlerPartTimeMember(item).deptFullName || '暂无' }}</span>
					</div>
				</template> -->
			<div
				style="flex: 1;margin-left:10px;"
				class="other-prop"
			>
				{{ item.$_showLabel }}
			</div>
			<div class="other-prop other-post" >{{ item.deptName }}</div>
			<!-- </a-tooltip> -->
		</div>
		<div v-if="loading && !loadAll" class="loading-container">
			<a-spin/>
		</div>
	</div>
</template>
<script>
import InfiniteScroll from '@/directive/InfiniteScroll';
import MultiSelect from '@/directive/MultiSelect';
import { getPanelData } from '@/api/modules/SelectOrgApi';
import { getSelectKey } from '@/utils/utils';

export default {
	name: 'DetailList',
	inject: ['app'],
	directives: { InfiniteScroll, MultiSelect },
	data() {
		return {
			loading: false,
			loadAll: false,
			pageNo: 1,
			searchParams: {},
			memberDatas: []
		};
	},
	props: {
		selectedMaps: {
			required: false,
			default: {}
		}
	},
	computed: {
		pageSize() {
			const { defaultPageSize } = this.app().orgSelect;
			return defaultPageSize || 100;
		},
		model() {
			const { maxSize } = this.app().orgSelect;
			if (Number(maxSize) === 1) {
				return 'single';
			}
			return 'mult';
		}
	},
	methods: {
		search(value) {
			this.loadAll = false;
			this.initProps();
			this.searchParams = value;
			this.searchHandle({
				pageSize: this.pageSize,
				pageNo: this.pageNo,
				...this.searchParams
			});
		},
		initProps() {
			this.pageNo = 1;
			this.searchParams = {};
			this.memberDatas = [];
			this.loadAll = false;
		},
		/**
		 * 滚动事件
		 */
		infiniteOnLoadHandle() {
			if (this.loadAll) {
				return;
			}
			if (this.loading) {
				return;
			}
			let config = {
				pageSize: this.pageSize,
				pageNo: this.pageNo
			};
			if (JSON.stringify(this.searchParams) !== '{}') {
				config = {
					pageSize: this.pageSize,
					pageNo: this.pageNo,
					...this.searchParams
				};
			}
			this.searchHandle(config);
		},
		async searchHandle(config) {
			this.loading = true;
			let { code, data, message } = await getPanelData({
				panel: 'Post',
				command: 'memberList',
				arguments: config
			});
			if (String(code) !== '0') {
				this.$message.error(message);
				this.loading = false;
				return;
			}
			this.dataHandle(data);
		},
		dataHandle(data) {
			const _t = this;
			this.memberDatas = this.memberDatas.concat(
				data.map((item) => {
					item.$_showLabel = item.name;
					item.$_selectKey = getSelectKey(item);
					return item;
				})
			);
			this.pageNo++;
			if (data.length < this.pageSize) {
				this.loadAll = true;
			}
			this.loading = false;
		},
		/**
		 * 处理部门人员、岗位人员、职务级别人员兼职的展示处理
		 */
		onHandlerPartTimeMember(data) {
			let { sourceDepts, sourcePosts } = data;
			if (sourceDepts.length) {
				let deptList = [];
				sourceDepts.forEach((el) => {
					deptList.push(el.name);
				});
				data.deptFullName = deptList.join(',');
				data.deptName = deptList.join(',');
			}
			if (sourcePosts.length) {
				let postList = [];
				sourcePosts.forEach((el) => {
					postList.push(el.name);
				});
				data.postName = postList.join(',');
			}
			return data;
		},
		onRadioChange(event, item) {
			this.$emit('checked', {
				checked: true,
				entity: item,
				isSingle: this.model === 'single'
			});
		},
		onCheckedChange(event, data) {
			let checkStatus = event.target.checked;
			this.$emit('checked', {
				checked: checkStatus,
				entity: data,
				isSingle: this.model === 'single'
			});
		},
		setTitle(data) {
			let { sourceDepts, sourcePosts } = data;
			if (sourceDepts.length) {
				let deptList = [];
				sourceDepts.forEach((el) => {
					deptList.push(el.name);
				});
				data.deptFullName = deptList.join(',');
				data.deptName = deptList.join(',');
			}
			if (sourcePosts.length) {
				let postList = [];
				sourcePosts.forEach((el) => {
					postList.push(el.name);
				});
				data.postName = postList.join(',');
			}
			return `${data.name} \n岗位：${data.postName || '暂无'}\n部门：${data.deptFullName || '暂无'}`;
		},
		onSelectMember(data) {
			let entity = this.selectedMaps[data.$_selectKey];
			let checkStatus = false;
			if (!entity) {
				checkStatus = true;
			}
			this.$emit('checked', {
				checked: checkStatus,
				entity: data,
				isSingle: this.model === 'single'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.detial-list-infinite-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
	// padding: 0 10px 6px;
	box-sizing: border-box;
	background: #fff;
	user-select: none;

	& /deep/ .ant-checkbox-group {
		display: block;
	}

	& /deep/ .ant-checkbox-wrapper {
		display: block;
		margin: 0;
	}

	& /deep/ .ant-radio-group {
		display: block;
	}

	& /deep/ .ant-radio-wrapper {
		display: block;
		margin: 0;
	}

	.load-all {
		height: 40px;
		line-height: 20px;
		text-align: center;
		color: #999;
		font-size: 12px;
	}

	.loading-container {
		width: 100%;
		text-align: center;
	}

	.checkbox-item {
		display: flex;
		display: -ms-flexbox;
		align-items: center;
		width: 100%;
		height: 22px;
		box-sizing: border-box;
		padding-left: 14px;
		margin-top: 4px;
		line-height: 22px;

		& /deep/ .ant-checkbox + span {
			display: inline-block;
			width: calc(100% - 24px);
			@include ellipsis();
		}

		.checkbox-item-checkbox {
			display: flex;
			align-items: inherit;
			overflow: hidden;

			& /deep/ .ant-radio + span {
				display: inline-block;
				width: calc(100% - 24px);
				@include ellipsis();
				vertical-align: -6px;
			}

			& /deep/ .ant-checkbox {
				margin-top: 2px;
			}
		}

		.singleAndMult {
			flex: none;

			& + div {
				margin-left: 0;
			}
		}

		.other-prop {
			margin-left: 10px;
			width: 150px !important;
			height: 100%;
			flex-shrink: 0;
			flex-grow: 0;
			@include ellipsis();
			font-size: 14px;
			color: $defaultFontColor;
			cursor: pointer;

			.other-code {
				margin-left: 10px;
				color: #333;
			}
			&.other-post{
				color: $postDefalutFontColor;
			}
		}

		&:hover {
			background: $hoverColor;
		}

		& .tooltip-wrap {
			display: flex;
			width: calc(100% - 18px);
			align-items: center;
		}
	}


	.checkbox-item-disabled {
		cursor: not-allowed;

		.other-prop {
			cursor: not-allowed;
		}
	}

	.btn-box {
		position: fixed;
		z-index: 1;
		width: 430px;
		display: flex;
		align-items: center;
		padding: 6px 0 6px 14px;
		background: #fff;

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			color: #333;
			outline: none;
			border: 1px solid $borderColor;
			background: #fff;
			cursor: pointer;

			&:hover {
				color: $commonBlue;
				border-color: $commonBlue;
			}

			&:first-child {
				margin-right: 10px;
			}
		}
	}

	.btn-box-shadow {
		width: 100%;
		height: 36px;
	}
}
</style>
